<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.box1 {
				width: 300px;
				height: 300px;
				background-color: orange;
			}

			.box2 {
				width: 100px;
				height: 100px;
				background-color: red
			}
		</style>
		<style>
			li {
				list-style: none;
				height: 50px;
				line-height: 50px;
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<span>我是span1</span>
				<button>删除</button>
			</li>
			<li>
				<span>我是span2</span>
				<button>删除</button>
			</li>
		</ul>

		<script>
			// 需求，点击button之后删除整行
			// for循环给每个button按钮添加点击事件
			var ul = document.querySelector('ul');
			//找到共同的父级
			ul.onclick = function(e) {
				console.log("ee", e.target);
				console.log(this);
				// console.log("nodeName",e.target.nodeName);
				// console.log("tagName",e.target.tagName);
				if (e.target.tagName == "BUTTON") {
					this.removeChild(e.target.parentNode);
					//e.target.parentNode.remove(); 
				} else if (e.target.tagName == "SPAN") {
					//第一步判断是span标签，第二步根据target点谁选择谁来改变点击对象的颜色样式
					e.target.style.color = "#0099ff";

				}

			}
		</script>
	</body>

</html>
